<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="process" style="width: 200px;height: 200px;">

</div>

</body>
<style>
  :root {
    --width: 290;
    --height: 370;
    --line: 8;
    --green: green;
    --blue: blue;
    --time: 100;
  }

  .progress {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--height);
    width: var(--width);
    border-radius: calc(var(--line) / 2);
    background:
            linear-gradient(to right, var(--green) 99.99%, var(--blue))
            calc(-1 * var(--width)) 0rem
    / 100% var(--line),
            linear-gradient(to bottom, var(--green) 99.99%, var(--blue))
            calc(var(--width) - var(--line)) calc(-1 * var(--height))
    / var(--line) 100%,
            linear-gradient(to right, var(--green) 99.99%, var(--blue))
            var(--width) calc(var(--height) - var(--line))
    / 100% var(--line),
            linear-gradient(to top, var(--green), 99.99%, var(--blue))
            0rem var(--height)
    / var(--line) 100%;
    background-repeat: no-repeat;
    animation: progress var(--time) linear forwards infinite;
  }

  @keyframes progress {
    0% {
      background-position:
              calc(-1 * var(--width)) 0rem,
              calc(var(--width) - var(--line)) calc(-1 * var(--height)),
              var(--width) calc(var(--height) - var(--line)),
              0rem var(--height);
    }
    25% {
      background-position:
              0rem 0rem,
              calc(var(--width) - var(--line)) calc(-1 * var(--height)),
              var(--width) calc(var(--height) - var(--line)),
              0rem var(--height);
    }
    50% {
      background-position:
              0rem 0rem,
              calc(var(--width) - var(--line)) 0rem,
              var(--width) calc(var(--height) - var(--line)),
              0rem var(--height);
    }
    75% {
      background-position:
              0rem 0rem,
              calc(var(--width) - var(--line)) 0rem,
              0rem calc(var(--height) - var(--line)),
              0rem var(--height);
    }
    100% {
      background-position:
              0rem 0rem,
              calc(var(--width) - var(--line)) 0rem,
              0rem calc(var(--height) - var(--line)),
              0rem 0rem;
    }
  }


</style>
</html>
